<template>
  <div class="board-page-wrapper">
    <div class="table-wrapper">
      <div class="tab-wrapper">
        <span :class="queryParams.orderType === '0' ? 'tab-item active' : 'tab-item'" @click="handleStatusChange('0')"
          >未完成（3）</span
        >
        <span :class="queryParams.orderType === '1' ? 'tab-item active' : 'tab-item'" @click="handleStatusChange('1')"
          >已完成（3）</span
        >
        <span :class="queryParams.orderType === '2' ? 'tab-item active' : 'tab-item'" @click="handleStatusChange('2')"
          >已撤销（3）</span
        >
      </div>
      <div class="table-content">
        <el-table :header-cell-style="{ background: '#E1ECF7' }" v-loading="loading" :data="tableList" border>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200px" />
          <el-table-column label="单号" align="center" prop="phonenumber" />
          <el-table-column label="地点" align="center" prop="card" />
          <el-table-column label="原因描述" align="center" prop="card2" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document" @click="handleOpenDetails(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <el-dialog title="报修订单详情" :visible.sync="open" width="1300px" top="5vh" append-to-body>
        <div class="details-dialog">
          <div class="details-wrapper">
            <el-row>
              <el-col :span="7" :offset="1" style="border-right: 1px dashed #4977fc">
                <div class="details-item">
                  <span class="item-label">单号：</span>
                  <span>201684654</span>
                </div>
                <div class="details-item">
                  <span class="item-label">部门：</span>
                  <span>教职工</span>
                </div>
                <div class="details-item">
                  <span class="item-label">报修地点：</span>
                  <span>xxxxxxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">数量：</span>
                  <span>1</span>
                </div>
                <div class="details-item">
                  <span class="item-label">是否收费：</span>
                  <span>免费</span>
                </div>
              </el-col>
              <el-col :span="7" :offset="1" style="border-right: 1px dashed #4977fc">
                <div class="details-item">
                  <span class="item-label">联系人姓名：</span>
                  <span>xxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">维修科室：</span>
                  <span>xxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">报修设备：</span>
                  <span>xxxxxxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">指派人：</span>
                  <span>xxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">报修人姓名：</span>
                  <span>xxx</span>
                </div>
              </el-col>
              <el-col :span="7" :offset="1">
                <div class="details-item">
                  <span class="item-label">联系人电话：</span>
                  <span>15800000000</span>
                </div>
                <div class="details-item">
                  <span class="item-label">报修时间：</span>
                  <span>2020-11-11 11：11：01</span>
                </div>
                <div class="details-item">
                  <span class="item-label">描述：</span>
                  <span>xxxxxxx</span>
                </div>
                <div class="details-item">
                  <span class="item-label">是否有效：</span>
                  <span>有效单</span>
                </div>
                <div class="details-item">
                  <span class="item-label">报修人电话：</span>
                  <span>15800000000</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="operate-wrapper">
            <el-row style="width: 100%;">
              <el-col :span="7" :offset="1">
                <div class="operate-item">
                  <span class="item-label">已指派</span>
                  <span>直接结束</span>
                </div>
              </el-col>
              <el-col :span="7" :offset="1">
                <div class="operate-item">
                  <span class="item-label" style="width: 160px;">结束订单操作员</span>
                  <span>zzz</span>
                </div>
              </el-col>
              <el-col :span="7" :offset="1">
                <div class="operate-item">
                  <span class="item-label">联系方式</span>
                  <span>15800000000</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { listFeedback } from '@/api/problem/feedback'

  export default {
    name: 'repairOrder',
    data() {
      return {
        // 遮罩层
        loading: false,
        open: false,
        // 总条数
        total: 0,
        // 表格数据
        tableList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderType: '0'
        }
      }
    },
    components: {},
    created() {
      this.getList()
    },
    methods: {
      handleStatusChange(val) {
        this.queryParams.orderType = val
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 查询问题反馈列表 */
      getList() {
        this.loading = true
        listFeedback(this.queryParams)
          .then(response => {
            this.tableList = response.rows
            this.total = response.total
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleOpenDetails(row) {
        this.open = true
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .board-page-wrapper {
    padding: 50px 38px;
    .table-wrapper {
      border-top: 2px solid #3672fe;
      background-color: #ffffff;
      .tab-wrapper {
        display: flex;
        .tab-item {
          width: 100px;
          height: 30px;
          border: 1px solid #3672fe;
          border-radius: 2px;
          font-size: 14px;
          color: #3672fe;
          line-height: 30px;
          text-align: center;
          margin-right: 18px;
          cursor: pointer;
          &.active {
            background-color: #3672fe;
            color: #ffffff;
          }
        }
        padding: 12px 40px;
      }
      .table-content {
      }
    }
  }
  .details-dialog {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 28px;
    margin: -12px 10px 20px;
    background: #f7fafd;
    padding: 32px;
    border: 1px solid #d8e2f0;
    .details-wrapper {
      background-color: #ffffff;
      padding: 30px 0;
      border-top: 2px solid #3672fe;
    }
    .details-item {
      .item-label {
        display: inline-block;
        width: 100px;
      }
    }
    .operate-wrapper {
      height: 62px;
      display: flex;
      align-items: center;
      background: #ffffff;
      border-top: 8px solid #f7fafd;
    }
    .operate-item {
      .item-label {
        display: inline-block;
        width: 100px;
        color: #3672fe;
      }
    }
  }
</style>
